import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './Login.module.css';
import logo from '../assets/react.svg'; // 可替换为学信网logo

import { post } from '../components/axios';
import { Spin } from 'antd';
import LoginSuccessAnimation from '../components/LoginSuccessAnimation';
export default function Login() {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [jobNumber, setJobNumber] = useState('');
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const goLogin = () => {
    if (!jobNumber || !username || !password) {
      setError('工号、用户名和密码不能为空');
      return;
    }
    post('/login', { username, password, jobNumber })
      .then(res => {
        // 处理登录结果
        if (username === 'admin' && password === '22222' && jobNumber === '1001B121102') {
          sessionStorage.setItem('token', '1234');
          navigate('/');
        } else {
          setError('用户名、密码或工号错误');
        }
      })
      .catch(err => {
        // 处理错误
      });

  };
  const ggg = () => {
    setIsLoggingIn(true);
    setTimeout(() => {
      sessionStorage.setItem('token', '1234');
      sessionStorage.setItem('userId', '6844e3d427d5217fde126ee2');
      navigate('/');
    }, 2200); // 动画持续1.2秒
  };
  return (
    <div  className={`${styles['login-bg']} ${isLoggingIn ? styles['loginBgSuccess'] : ''}`}>
      {isLoggingIn ? (
        <div style={{ textAlign: 'center', marginTop: 120 }}>
          <LoginSuccessAnimation className={{
            animation: 'rotate 1s infinite',
            transform: 'rotate(360deg)',
            color: '#fff',
            fontSize: '30px',
          }}/>
        </div>
      ) : (
        <div className={styles['login-container']}>
          <img src={logo} alt="logo" className={styles['login-logo']} />
          <div className={styles['login-title']}>项目管理系统</div>
          <input
            className={styles['login-input']}
            type="text"
            placeholder="请输入用户名"
            value={username}
            onChange={e => setUsername(e.target.value)}
          />
          <input
            className={styles['login-input']}
            type="text"
            placeholder="请输入工号"
            value={jobNumber}
            onChange={e => setJobNumber(e.target.value)}
          />
          <input
            className={styles['login-input']}
            type="password"
            placeholder="请输入密码"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
          <button className={styles['login-btn']} onClick={ggg} disabled={isLoggingIn}>登 录</button>
          {error && <div className={styles['login-error']}>{error}</div>}
        </div>
      )}
    </div>
  );
}